<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>店铺资料</title>
		<script src="../js/mui.min.js"></script>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/iconfont.css" />
		<link rel="stylesheet" href="../css/style.css" />
		<link rel="stylesheet" href="../css/member.css" />
		<link rel="stylesheet" href="../css/picker.css" />
		<link rel="stylesheet" href="../css/poppicker.css" />
		<link rel="stylesheet" type="text/css" href="../css/datepicker3.css" />
		<script src="../plugin/crop/croppie.min.js"></script>
		<link rel="stylesheet" href="../css/font-awesome.min.css" />
		<link rel="stylesheet" href="../css/bootstrap.min.css" />

		<style type="text/css">
			.grzl_toux {
				position: relative;
			}
			/*#upload{opacity:0;filter:alpha(opacity=0);height: 95px; width: 100px;position: absolute;top: -80px;left: -40px;z-index: 9;}*/
			/*.btn_thumb{opacity:0;filter:alpha(opacity=0);height: 95px; width: 100px;position: absolute;top: -0px;left: -0px;z-index: 9;}*/
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">店铺资料</h1>
		</header>
		<div class="mui-content ">
			<div class="gerenzl_nr">
				<form class="mui-input-group gerenzl_group">
					<div class="gerenzl_top img-click">
						<div class="actions">
							<button class="file-btn">
				                <span><i class=" fa fa-plus"></i></span>
				                <input type="file" id="upload" value="选择图片文件" multiple />
				            </button>
							<div id="img_list" class="img_list">
							</div>
						</div>
						<!--<div class="grzl_toux" id="touxiang">
			    		<div id="img_list" class="img_list">
			    			<img id="tupian" src="images/toux.jpg">
			    		</div>
			    		<button class="file-btn" id="btn_thumb" style="opacity:0;filter:alpha(opacity=0);height: 95px; width: 100px;position: absolute;top: -0px;left: -0px;z-index: 9;">
			                <span><i class=" fa fa-plus"></i></span>   
			                <input type="file" id="upload" name="upload" value="选择图片文件" style=" "multiple />
			          </button>
			    	</div>-->
						<div>头像</div>
					</div>
					<div style="height:5px;background-color: #EFEFF4;"></div>
					<div class="mui-input-row ">
						<label>昵称</label>
						<input type="text" id="nick_name" class="mui-input-group" placeholder="请填写昵称">
					</div>
					<div class="mui-input-row">
						<label>真实姓名</label>
						<input type="text" id="real_name" class="mui-input-group" placeholder="请输入您的真实姓名">
					</div>
					<div class="mui-input-row">
						<label>性别</label>
						<select class="mui-btn mui-btn-block" id="sex">
							<option value="1">男</option>
							<option value="2">女</option>
						</select>
					</div>
					<div class="mui-input-row">
						<label>生日</label>
						<!--<input type="text"  name="birthday" id="birthday" class="datetimepicker" id="datetimepicker">-->
						<input type="text" name="birthday" id="birthday" class="datetimepicker" id="datetimepicker">
					</div>
					<div class="mui-input-row">
						<label>手机</label>
						<input type="text" id="mobile" class="mui-input-group" placeholder="请输入您的手机号码">
					</div>
					<div class="mui-input-row">
						<label>职业</label>
						<input type="text" id="position" class="mui-input-group" placeholder="请输入您的职业">
					</div>
					<div class="mui-input-row">
						<label>城市</label>
						<input type="text" id="district" readonly="readonly" class="mui-input-group" placeholder="请选择地区">
					</div>
					<div class="mui-input-row">
						<label>个性签名</label>
						<input type="text" id="sign" class="mui-input-group" placeholder="">
					</div>
				</form>
				<div class="gerzl_btn" id="btn">
					<a href="#">保存</a>
				</div>
			</div>
			<input type="hidden" id="member_id">
			<!--<input type="hidden" id="gui" value="1">-->
		</div>

	</body>

</html>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-datepicker.js"></script>
<script src="../js/layer/layer.min.js"></script>
<script src="../js/castapp.js"></script>
<script src="../js/app.js"></script>
<script src="../js/picker.js"></script>
<script src="../js/poppicker.js"></script>
<script src="../js/city.data-3.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script>
	$(function() {
		dlpd();
		$(".datetimepicker").datepicker({
			language: "zh-CN",
			autoclose: true, //选中之后自动隐藏日期选择框
			clearBtn: true, //清除按钮
			todayBtn: true, //今日按钮
			format: "yyyy-mm-dd" //日期格式，详见 http://bootstrap-datepicker.readthedocs.org/en/release/options.html#format
		});
		$('#upload').on('change', function() {
			
			readFile(this, "thumb", 1);
			$(".file-btn").hide();
		});
		//显示需要编辑得内容
		$.ajax({
			//type: 'post',
			url: APP.api_url + 'member/member_info',
			data: {
				token: get_token(),
				uid: getUid()
			},
			success: function(data) {
				if(data.code == 200) {
					var json = data.data;
					$("#tupian").attr('src', APP.pic_url + json.thumb);
					$("#nick_name").val(json.nick_name);
					$("#real_name").val(json.real_name);
					$("#sex").val(json.sex);
					$("#birthday").val(json.birthday);
					$("#mobile").val(json.mobile);
					$("#position").val(json.position);
					if(json.province == null && json.city == null && json.district == null) {
						var s = "";
					} else {
						$('#district').val(json.province + ',' + json.city + ',' + json.district);
					}

					$("#sign").val(json.sign);
					$("#member_id").val(json.id);
					if(json.thumb) {
						$(".file-btn").hide();
						$("#img_list").html('<img id="tupian" style="width:100px;height:100px;margin-left: 39%;" src="' + APP.pic_url + json.thumb + '">');
						del_event();
					}
				} else {
					console.log(data.msg);
				}
			}
		})
	});
	ca.init();
	var btn = ca.id('btn');
	var input = ca.tagName('input');
	var dis = ca.id('district');
	dis.addEventListener('tap', function() {
		castapp.combinationSelect(3, cityData3, function(arr) {
			dis.value = arr;
		});
	})
	var imgs = ca.className("gr-img");
	var imgclick = ca.className('img-click');
	btn.addEventListener('tap', function() {
		var district = $('#district').val();
		var disarr = district.split(',');
		var data = {
			token: get_token(),
			uid: getUid(),
			id: $("#member_id").val(),
			thumb: $("input[name='thumb']").val(),
			nick_name: $("#nick_name").val(),
			real_name: $("#real_name").val(),
			sex: $("#sex").val(),
			birthday: $("#birthday").val(),
			mobile: $("#mobile").val(),
			position: $("#position").val(),
			province: disarr[0],
			city: disarr[1],
			district: disarr[2],
			sign: $("#sign").val()
		};
		$.ajax({
			type: 'post',
			url: APP.api_url + 'Member/update',
			data: data,
			success: function(data) {
				layer.msg(data.msg);

			}
		});
	})
</script>